<template>
	<div class="edit">
		<!-- 头部导航栏 -->
		<van-nav-bar
			title="编辑资料"
			left-arrow
			@click-left="$router.back()"
			:border="false"
			fixed
		/>
		<!-- 头像 -->
		<div class="avatar">
			<van-uploader
				:after-read="editAvatarFn"
				:max-count="1"
				:max-size="500 * 1024"
				@oversize="onOversizeFn"
			>
				<div class="avatar-img">
					<van-image
						round
						width="100%"
						height="100%"
						:src="userInfo.head_img | imgUrl"
						fit="cover"
					/>
				</div>
			</van-uploader>
			<p>点击图片上传头像</p>
		</div>

		<!-- 信息栏 -->
		<MyCell
			title="名昵"
			:value="userInfo.nickname"
			@click="
				dialog = true;
				nicknameTemp = userInfo.nickname;
				editName = true;
			"
		></MyCell>
		<MyCell
			title="密码"
			value="******"
			@click="
				dialog = true;
				editName = false;
			"
		></MyCell>
		<MyCell
			title="性别"
			:value="userInfo.gender === 1 ? '男' : '女'"
			@click="editGenderToast = true"
		></MyCell>

		<!-- 模态框 -->
		<van-dialog
			v-model="dialog"
			show-cancel-button
			@cancel="cancelEditFn"
			@confirm="confirmEditFn"
			title="编辑信息"
		>
			<!-- 修改用户名 -->
			<van-cell-group v-if="editName">
				<van-field
					label="用户名"
					v-model="nicknameTemp"
					placeholder="请输入用户名"
					maxlength="10"
					colon
					clearable
				/>
			</van-cell-group>
			<!-- 修改密码 -->
			<van-cell-group v-else>
				<van-field
					label="旧密码"
					placeholder="请输入旧密码"
					maxlength="10"
					colon
					required
					clearable
					@blur="oldErrMsg = oldPsd === userInfo.password ? '' : '密码错误'"
					v-model="oldPsd"
					:error-message="oldErrMsg"
					type="number"
				/>
				<van-field
					label="新密码"
					placeholder="请输入新密码"
					maxlength="10"
					required
					clearable
					colon
					@blur="newErrMsg = /^[\w~!@#$%^&*()+=]{3,18}$/.test(newPsd) ? '' : '格式有误'"
					v-model="newPsd"
					:error-message="newErrMsg"
					:type="eye_type"
					:right-icon="eye"
					@click-right-icon="changeEye"
				/>
			</van-cell-group>
		</van-dialog>
		<!-- 修改性别 -->
		<van-action-sheet
			v-model="editGenderToast"
			:actions="[{ name: '男', gender: 1 }, { name: '女', gender: 0 }]"
			cancel-text="取消"
			close-on-click-action
			@cancel="cancelEditFn"
			@click-overlay="cancelEditFn"
			@select="confirmEditFn"
		/>
	</div>
</template>

<script>
import MyCell from '@/components/MyCell.vue';
import { getUserInfoAPI, editUserInfoAPI } from '@/api/user.js';
import { uploadAPI } from '@/api/index.js';
export default {
	data() {
		return {
			// 页面信息
			userInfo: {
				gender: 1,
				nickname: '官方认证火星网友',
				head_img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
			},
			// 各种模态框
			dialog: false,
			editName: false,
			editGenderToast: false,
			nicknameTemp: '',
			oldPsd: '',
			oldErrMsg: '',
			newPsd: '',
			newErrMsg: '',
			eye: 'eye-o',
			eye_type: 'password'
		};
	},
	components: {
		MyCell
	},
	methods: {
		// 改变小眼睛
		changeEye() {
			if (this.eye === 'eye-o') {
				this.eye = 'closed-eye';
				this.eye_type = 'number';
			} else {
				this.eye = 'eye-o';
				this.eye_type = 'password';
			}
		},
		// 校验旧密码
		checkNewPsd() {
			if (/^[\w~!@#$%^&*()+=]{3,18}$/.test(newPsd)) this.newErrMsg = '';
			else this.newErrMsg = '密码格式错误';
		},
		// 提交修改
		async confirmEditFn(action, headImg) {
			this.$toast.loading('保存中');

			// 安全阻断 - 数据全无不执行
			if (this.newPsd === '' && this.nicknameTemp === '' && !action && !headImg)
				return this.$toast.fail('提交失败');
			// 安全阻断 - 密码错误不执行
			if (this.oldErrMsg !== '' || this.newErrMsg !== '') return this.$toast.fail('提交失败');

			let data = {};
			// 密码
			if (this.newPsd !== '') data.password = this.userInfo.password = this.newPsd;
			// 昵称
			if (this.nicknameTemp !== '')
				data.nickname = this.userInfo.nickname = this.nicknameTemp;
			// 性别
			if (action) data.gender = this.userInfo.gender = action.gender;
			// 头像
			if (headImg) data.head_img = headImg;

			// 发送请求
			const edit_result = await editUserInfoAPI(this.$route.query.id, data);
			console.log(edit_result.data);

			// 安全阻断
			if (edit_result.status !== 200) return this.$toast.fail('提交失败');
			this.userInfo.head_img = edit_result.data.data.head_img;
			this.$toast.success('提交成功');
			// 清空数据
			this.cancelEditFn(true);
		},
		// 取消修改
		cancelEditFn(bloen) {
			if (!bloen) this.$toast('取消保存');
			this.nicknameTemp = this.oldPsd = this.newPsd = this.newErrMsg = this.oldErrMsg = '';
		},
		// 上传图片
		async editAvatarFn(file) {
			// console.log(file);
			// file 上传的文件

			// 文件上传到服务器
			const fd = new FormData();
			fd.append('file', file.file);
			const fd_result = await uploadAPI(fd);
			// console.log(fd_result.data);

			// 安全阻断
			if (fd_result.status !== 200) return this.$toast.fail('提交失败');

			// 更新后台头像信息
			// fd_result.data.data.url 图片地址
			this.confirmEditFn(null, fd_result.data.data.url);
		},
		// 上传图片超出大小限制
		onOversizeFn(file) {
			this.$toast.fail('文件大小不能超过 500kb');
		}
	},
	// 初期渲染
	async created() {
		const result = (await getUserInfoAPI(this.$route.query.id)).data;
		console.log(result);
		this.userInfo = result.data;
	}
};
</script>

<style lang="less" scoped>
/* navbar */
/deep/ .van-nav-bar {
	background-color: #ececec;
	.van-ellipsis {
		// color: white;
	}
	.van-nav-bar__left {
		color: white;
	}
}
.avatar {
	margin-top: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200px;
	background-color: #ececec;
	flex-direction: column;
	.avatar-img {
		overflow: hidden;
		width: 100px;
		height: 100px;
		background-color: pink;
		border-radius: 50%;
		border: 10px solid #ccc;
	}
	p {
		font-size: 14px;
		margin-top: 10px;
		color: #0570db;
	}
}
.toast {
	height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>
